<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="uft-8">
  	<title>1-3 延时文本框</title>
  	<style type="text/css">
  		*{
  			margin: 0;
  			padding: 0;
  			margin-top: 80px;
  		}
  		#div1{
  			width: 50px;
  			height: 50px;
  			margin-left: 400px;
  			background-color: red;
  			float: left;
  		}
  		#div2{
  			width: 200px;
  			height: 150px;
  			margin-left: 20px;
			background-color: green;
			float: left;
			display: none;
  		}
  	</style>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<script type="text/javascript">
		var touxiang=document.getElementById('div1'),
			wenben=document.getElementById('div2'),
			timer=null;
		wenben.onmouseover=touxiang.onmouseover=function(){
			clearTimeout(timer);
			wenben.style.display='block';
		}
		wenben.onmouseout=touxiang.onmouseout=function(){
			timer=setTimeout(function(){
				wenben.style.display='none';},600)
		}
  	</script>
</body>
</html>